<template>
  <div class="tpl-goods">
    <div v-for="(item, index) in itemListData" :key="index">
      <div class="middle-part">
        <div class="left-item">
          <img v-if="item.item_image_url" :src="item.item_image_url" alt="">
          <img v-else src="../../../assets/item-default.png" alt="">
        </div>
        <div class="right-item">
          <div class="title">{{ item.item_name }}</div>
          <!--tag标签-->
          <!--<span v-if="isSettlement" class="tag"><span>7天包换</span><span>0元包邮</span></span>-->
          <div class="prop">
            <span class="num">{{ item.children.length }}种</span>
            <div class="txt fr" @click="showGoodsBox(item, index)">
              <span v-if="!item.active" class="slide">展开</span>
              <span v-if="item.active" class="slide">收起</span>
              <i :class="item.active? 'up': ''" class="van-icon van-icon-arrow"/>
            </div>
          </div>
        </div>
      </div>
      <div v-if="item.active">
        <div v-for="child in item.children" :key="child.order_item_id" class="middle-part2">
          <div class="good-info">
            <div class="inline">
              <span v-if="child.sku_name" class="spec">{{ child.sku_name }}</span>
              <span v-else>无规格</span>
              <span class="num fr">x {{ child.num }}</span>
            </div>
            <div class="inline">
              <span class="spec">单价：&yen;{{ Number(child.price).toFixed(getitem.item_price_p) }} / {{ child.unit_name?child.unit_name:child.unit }}</span>
              <span v-if="child.total_price" class="price fr">&yen; {{ Number(child.total_price).toFixed(getitem.item_price_p) }}</span>
              <span v-else class="price fr">&yen; {{ parseFloat(child.num * child.price).toFixed(getitem.item_price_p) }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'TplTplGoodsSlide',
  props: {
    isSettlement: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    itemList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      showGoods: '',
      itemListData: []
    }
  },
  computed: {
    itemListComputed() {
      const itemList = this.itemList
      const arr = []
      itemList.forEach(item => {
        arr.push(item.item_id)
      })
      const newArr = [...new Set(arr)] // 数组去重
      const newItemList = []
      // 组合新数据
      newArr.forEach(arr => {
        const obj = {
          active: false,
          order_item_id: undefined,
          item_name: undefined,
          children: [],
          item_image_url: ''
        }
        itemList.forEach(item => {
          if (arr === item.item_id) {
            obj.order_item_id = item.order_item_id
            obj.item_name = item.item_name ? item.item_name : item.title
            obj.item_image_url = item.item_image_url
            obj.children.push(item)
          }
        })
        newItemList.push(obj)
      })
      // console.log('newItemList=', newItemList)
      return newItemList
    },
    ...mapGetters([
      'getitem'
    ])
  },
  watch: {
    itemList: { // 这监听对象值的改变 和上面的不一样。
      handler(curVal, oldVal) {
        // console.log(curVal, oldVal, '新值，旧值');
        this.itemListData = this.itemListComputed
      },
      deep: true
    }
  },
  mounted() {
    this.itemListData = this.itemListComputed
  },
  methods: {
    // 显示隐藏
    showGoodsBox(item, index) {
      const itemListData = this.itemListData
      itemListData[index].active = !itemListData[index].active
      itemListData.splice(index, 1, itemListData[index])
      this.itemListData = itemListData
      // console.log('this.itemListData=', this.itemListData)
    }
  }
}
</script>

<style scoped lang="scss">
  @import "src/styles/mixin.scss";
  .tpl-goods{
    background: #fff;
    .middle-part2{
      font-size: 0;
      .good-info{
        border-bottom: pxCalc(1px) solid #f5f5f5;
        padding: pxCalc(15px) pxCalc(20px) pxCalc(15px) 0;
        &.hidden{
          height: 0;
          overflow: hidden;
        }
        .inline{
          font-size: pxCalc(13px);
          line-height: 24px;
          color: #6c6c6c;
          .price{
            color: #000;
          }
        }
      }
    }
    .middle-part{
      padding-right: pxCalc(20px);
      padding: pxCalc(15px) 0;
      font-size: 0;
      border-bottom: pxCalc(1px) solid #f5f5f5;
      .left-item{
        display: inline-block;
        width: pxCalc(67px);
        height: pxCalc(67px);
        border-radius: pxCalc(5px);
        overflow: hidden;
        border: 1px solid #eee;
        vertical-align: top;
        margin-right: 10px;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .right-item{
        font-size: pxCalc(14px);
        display: inline-block;
        vertical-align: top;
        .title{
          margin-top: pxCalc(4px);
          width: pxCalc(250px);
          @include showEllipsis;
        }
        .tag{
          font-size: pxCalc(12px);
          color: #ff0000;
          span{
            border: 1px solid #ff0000;
            margin-right: pxCalc(5px);
            padding: 0 pxCalc(2px);
            border-radius: 5px;
          }
        }
        .prop{
          color: #999;
          margin-top: pxCalc(15px);
          .txt{
            display: inline-block;
          }
          .van-icon{
            vertical-align: pxCalc(-2px);
            margin-left: pxCalc(3px);
            transform: rotate(90deg);
            font-size: pxCalc(13px);
            transition:all 0.2s ease;
            &.up{
              transform: rotate(270deg);
            }
          }
          .num{
            font-size: pxCalc(14px);
          }
          .slide{
            cursor: pointer;
          }
        }
      }
    }
  }
</style>
